<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
  <title>webAPI实战捐赠管理</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    h3 {
      margin: 50px;
      text-align: center;
    }

    div {
      width: 914.17px;
      margin: 10px auto;
      border: 1px solid aqua;
    }

    table {
      width: 800px;
      margin: 0 auto;
      border-collapse: collapse;
      text-align: center;
    }

    thead {
      background-color: #337ab7;
      color: #fff;
    }

    td,
    th {
      padding: 10px 50px;
      /* 设置文字不换行 */
      white-space: nowrap;
    }
  </style>
</head>

<body>
  <h3>捐赠管理</h3>
  <div>
    <label for="">捐赠人</label>
    <input type="text" id="username" />

    <label for="for">受捐单位</label>
    <select id="unit">
      <option value="腾讯">腾讯</option>
      <option value="阿里">阿里</option>
      <option value="百度">百度</option>
      <option value="谷歌">谷歌</option>
    </select>

    <label for="">金额</label>
    <input type="text" id="money" />

    <label for="">日期</label>
    <input type="date" id="date" />

    <button>新增</button>
  </div>
  <table border="1">
    <thead>
      <tr>
        <th>序号</th>
        <th>捐赠人</th>
        <th>收捐单位</th>
        <th>金额</th>
        <th>收捐日期</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <script>
    // 获取标签元素
    const username = document.querySelector('#username');
    const unit = document.querySelector('#unit');
    const money = document.querySelector('#money');
    const date = document.querySelector('#date');
    const tbody = document.querySelector('tbody');
    const button = document.querySelector('button');

    // 声明数组
    let arr = JSON.parse(localStorage.getItem('arr1')) || [];
    // 渲染页面
    getRander();

    // 新增数据
    // 绑定按钮点击事件
    button.addEventListener('click', function (e) {
      e.preventDefault();
      const obj = {
        username: username.value.trim(),
        unit: unit.value.trim(),
        money: money.value.trim(),
        date: date.value.trim(),
      };

      arr.push(obj);
      // 渲染页面
      getRander();
      // 将数据存储到本地存储中
      localStorage.setItem('arr1', JSON.stringify(arr));
    })

    // 删除事件
    tbody.addEventListener('click', function (e) {
      if (e.target.classList.contains('del')) {
        const index = e.target.dataset.index;
        arr.splice(index, 1);
        // 渲染页面
        getRander();
        // 保存到本地存储中
        localStorage.setItem('arr1', JSON.stringify(arr));
      }
    })

    // 标签数据渲染
    // 数组遍历方法1
    /* function getRander() {
      let html = '';
      for (let index = 0; index < arr.length; index++) {
        arr[index];
        html += `
        <tr>
          <td>${index + 1}</td>
          <td>${arr[index].username}</td>
          <td>${arr[index].unit}</td>
          <td>${arr[index].money}</td>
          <td>${arr[index].date}</td>
          <td>
            <a href="#" data-index="${index}" class="del">删</a>
            <a href="#" class="update">改</a>
          </td>
        </tr>`;
      }
      tbody.innerHTML = html;
    } */
    // 数组遍历方法2 使用数组的map join方法实现
    function getRander() {
      const newarr = arr.map(function (value, index) {
        return `
         <tr>
           <td>${index + 1}</td>
           <td>${value.username}</td>
           <td>${value.unit}</td>
           <td>${value.money}</td>
           <td>${value.date}</td>
           <td>
             <a href="#" data-index="${index}" class="del">删</a>
             <a href="#" class="update">改</a>
           </td>
         </tr>`;
      });
      // 把内容渲染到tbody标签中
      tbody.innerHTML = newarr.join("");
    }
  </script>
</body>

</html>